<!-- 1. 逻辑代码 写函数 定义数据
setup : 用 Vue 提供的一种 语法糖 ， 简化的写法
lang = 'ts', 内部写的语言： TypeScript
-->

<script setup lang="ts">
import { reactive } from 'vue'
let food = reactive({
  name: '隆江猪脚饭',
  price: 18,
  foods: ['猪脚', '米饭', '酸菜'],
})
// 1. 注意点： 不支持普通类型
// 2. 注意点： 不要重新赋值， 会丢失响应性
</script>

<!-- 2. 结构 -->
<template>
  <button @click="food.name = '祖传隆江猪脚饭'">{{ food.name }}</button>
  <button @click="food.price++">{{ food.price }}</button>
  <button @click="food.foods.push('鸡腿')">{{ food.foods }}</button>
</template>
<!-- 3. 样式 -->
<style scoped></style>
